<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>history对象---10-history对象.html</h1>
    <a href="11-history对象.html">11-history对象.html</a>
    <hr>
    <button id="forward">前进-history.forward()</button>
    <button id="back">后退-history.back()</button>
    <button id="go">前进-history.go(1)</button>
    <button id="go2">后退-history.go(-1)</button>
    <script>
        var forward = document.querySelector('#forward')
        var back = document.querySelector('#back')
        var go = document.querySelector('#go')
        var go2 = document.querySelector('#go2')
        // history.back() : 返回上一页
        // history.forward():前进到下一页
        // 接收一个数值作为参数, 正数表示前进, 负数表示后退
        // history.go(-1)
        // history.go(1)
        forward.onclick = function () {
            history.forward()
        }
        back.onclick = function () {
            history.back()
        }
        go.onclick = function () {
            history.go(1)
        }
        go2.onclick = function () {
            history.go(-1)
        }

    </script>
</body>

</html>